<template>
	<view class="detail" v-show="showDiv == false">
		<uni-swiper-dot  :info="details.goodimgList" :current="current"  mode="round"
		:dotsStyles="{backgroundColor: 'rgba(0,0,0,0.5)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: '#ffffff',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'}">
			<swiper class="swiper-box" @change="change"  :autoplay="true" interval="2000">
				<swiper-item v-for="(item ,index) in details.goodimgList" :key="index">
					<view >
						<image :src="item" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="good">
			<view class="name">
				<view class="txt">{{details.goodName}}</view>
				<view class="span">
					<text class="t1">￥{{(details.goodPrice*1.1).toFixed(2)}}</text>
					<text class="t2">￥{{details.goodPrice}}</text>
				</view>
			</view>
			<view class="solds">
				<view class="sales">销量:{{details.goodSold}}</view>
				<view class="sales">收藏:{{details.goodCollect}}</view>
				<view class="sales">浏览量:{{details.goodLook}}</view>
			</view>
			<view class="table">
				<view class="_tr">
					<view class="_td">购买类型</view>
					<view class="_td" @click="addType()">
						<text  space="emsp">
						{{typeList}}
						</text>
					</view>
				</view>
				<view class="_tr">
					<view class="_td">促销活动</view>
					<view class="_td" >
						<text v-for="(item,i) in details.goodpromotion" :key="i">{{item.name}}\n</text>
					</view>
				</view>
				<view class="_tr">
					<view class="_td">服务</view>
					<view class="_td" style="display: flex;">
						<view style="margin-right: 10px;" v-for="item in details.goodservice" :key="item.name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="comments"  @click="isContent = !isContent">
			<view >评论({{len}})</view>
			<view >好评率 {{favorale}}%</view>
		</view>
		<view class="comlist">
			<view class="comul" v-for="item in details.goodCommectDetail" :key="item.id" v-show="isContent == true">
				<view class="comimage">
					<u-avatar :src="item.userface" shape="circle"></u-avatar>
				</view>
				<view class="_comment">
					<view class="hname">{{item.username}}</view>
					<view class="content">
						<view class="remark">
							{{item.content}}
						</view>
						<view class="com_image" v-if="item.imgList.length != 0">
							<image v-for="index in item.imgList" :key="index" :src="index"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="h1">图文详情</view>
		<view class="image" v-for="item in banner" :key="item">
			<image class="_img" :src="item" ></image>
		</view>
		<view class="btn" >
			<view class="icon">
				<view class="ico">
					<u-icon label="客服" label-pos="bottom" label-size="12" size="25" name="server-fill"></u-icon>
				</view>
				<view class="ico">
					<navigator url="/pages/index/index" open-type="switchTab">
						<u-icon label="首页" label-pos="bottom" label-size="12" size="25" name="home"></u-icon>
					</navigator>
				</view>
				<view class="ico">
					<navigator url="/pages/cart/cart" open-type="switchTab">
								<view class="box">
										 <u-badge numberType="overflow" type="error" max="99" :value="getCartLen"></u-badge>
									</view>
						<u-icon label="购物车" label-pos="bottom" label-size="12" size="25" name="shopping-cart"></u-icon>
					</navigator>
				</view>
			</view>
			<view class="btu" >
				<button @click="addCarts()">加入购物车</button>
			    <button @click="addOrder()" >立即购买</button>
			</view>
		</view>
		<u-overlay :show="show" >
			<view class="transition">
				<u-transition :show="show" mode="slide-up" >
				      <good-detail :list="{goodquaList:details.goodquaList,
											name:details.goodName,
											goodPrice:details.goodPrice,
											goodImg:details.goodImg
					  }" @closeT='fun'  @addGood='addto'></good-detail>
				</u-transition>
			</view>
		</u-overlay>
		<u-popup :show="isShow" :closeable="true" mode="bottom"  @close="close()">
		        <view class="share">
					<view class="_li">
					<image src="/pagesA/static/img/share/weixin.png"></image>
					<view>微信</view>
					</view>
		           <view class="_li">
		           	<image src="/pagesA/static/img/share/pengyouquan.png"></image>
		           	<view>朋友圈</view>
		           </view>
				   <view class="_li">
				   	<image src="/pagesA/static/img/share/qq.png"></image>
				   	<view>QQ</view>
				   </view>
				   <view class="_li">
				   	<image src="/pagesA/static/img/share/copy.png"></image>
				   	<view>复制</view>
				   </view>
		        </view>
			</u-popup>
	</view>
</template>

<script>
	import {apiDetail,apiBanner} from '../../api/mock.js'
	import {mapActions,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				showDiv:true,
				banner:[],
				current:0,
				show:false,
				details:{},
				typeList:'',
				isContent: false,
				favorale:0,
				len:0,
				isShow: false,
				shop:{
					type:'',
					num:'',
					id:0,
				},
				type:"error",
				act:'',
			}
		},
		onNavigationBarButtonTap(e) {
			this.isShow = !this.isShow;
		},
		watch:{
			details(val){
				if(Object.keys(val).length != 0){
					uni.hideLoading();
					this.showDiv = false;
				}
			}
		},
		onLoad(e) {
			uni.showLoading({
				title:'启动中...',
				mask:true,
			})
			console.log(e.id);
			this.shop.id = e.id;
			this.getDeatil(e.id);
			this.getBanner();
			console.log(this.getCartLen);
		},
		computed:{
			...mapGetters('carts',['getCartLen','getCarList']),
			...mapGetters('orders',['getOrderList']),
		},
		methods: {
			...mapActions('carts',['addCart']),
			...mapActions('orders',['addOrders','delOrders']),
			close() {
				this.isShow = false;
			},
			fun(val){
				console.log(val);
				this.show = val;
			},
			addType(){
				this.act = 'type'
				this.show = true;
			},
			addto(val){
				if(!this.$store.state.user.user.logons){
					uni.showToast({
						icon:'error',
						title:'请登录'
					})
					return;
				}
				console.log(this.act);
				this.shop.type = val.type;
				this.shop.num = val.num;
				this.typeList = val.type +','+val.num+'个';
				console.log(this.typeList);
				if(this.act == 'cart'){
					this.addCarts();
					
				}else if(this.act == 'order'){
					this.addOrder();	
				}else{
					
				}
				this.act = '';
				
				
			},
			addCarts(){
				this.act = 'cart';
				console.log(this.typeList);
				if(this.typeList.trim() == ''){
					this.show = true;
					return;
				}
				console.log(this.shop);
				let obj = this.details.goodquaList.find(item => item.val == this.shop.type);
				console.log(obj);
				let id = 0;	
				if(this.getCarList.length != 0){
					id = this.getCarList[this.getCarList.length-1].id;
				}
					this.addCart({
						id:id+1,
						goodId:this.details.id,
						goodImg:this.details.goodImg ,
						goodName:this.details.goodName,
						goodPrice: obj.price == 0?this.details.goodPrice:obj.price,
						goodSold: this.details.goodSold,
						type:this.shop.type,
						count: this.shop.num,
						selected: false,
						show: false
					})
					uni.showToast({
						icon:'success',
						title:'成功加入购物车'
					})
					this.typeList='';
					this.shop={};
			},
			addOrder(){
				this.act = 'order';
				if(this.typeList.trim() == ''){
					this.show = true;
					return;
				}
				this.delOrders();
				let obj = this.details.goodquaList.find(item => item.val == this.shop.type);
				this.addOrders({
					id:obj.id,
					goodId:this.details.id,
					goodImg:this.details.goodImg ,
					goodName:this.details.goodName,
					goodPrice: obj.price == 0?this.details.goodPrice:obj.price,
					goodSold: this.details.goodSold,
					type:this.shop.type,
					count: this.shop.num,
					selected: false,
					show: false
				})
				this.typeList='';
				this.shop={};
				uni.navigateTo({
					url:'/pagesD/pay-detail/pay-detail',
				})
			},
			change(e) {
				this.current = e.detail.current;
				// console.log(e.detail.current);
			},
			getDeatil(id){
				apiDetail(id).then((res)=>{
					this.details = res;
					console.log(this.details);
					if(this.details.goodCommectDetail.length > 0){
						let list =	this.details.goodCommectDetail.filter(item => item.favorale == 1);
						this.favorale = (list.length/this.details.goodCommectDetail.length)*100;
					}else{
						this.favorale = 0;
					}
					this.len = this.details.goodCommectDetail.length;
					console.log(res);
				}).catch((error)=>{
					console.log(error);
				})
			},
			getBanner(){
				apiBanner('asc').then((res)=>{
					console.log(res);
					this.banner = res;
				}).catch((error)=>{
					console.log(error);
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.detail{
		width: 100%;
		position: relative;
		.swiper-box{
			background-color: skyblue;
		}
		.swiper-box image{
			width: 100%;
		}
		.good{
			padding: 10px;
			.name{
				width: 100%;
				.txt{
					text-align: center;
					font-size: 18px;
				}
				.span{
					margin-left: 10px;
					.t1{
						text-decoration: line-through;
						margin-right: 10px;
						color: gray;
					}
					.t2{
						color: red;
					}
				}
			}
			.solds{
				display: flex;
				color: gray;
				height: 40px;
				line-height: 40px;
				.sales{
					width: 33.3%;
				}
			}
			.table{
				width: 100%;
				font-size: 13px;
				._tr{
					width: 100%;
					display: flex;
					._td:nth-child(1){
						width: 20%;
						height: 20px;
						color: gray;
						margin: auto;
					}
					._td:nth-child(2){
						width: 80%;
						padding-top: 10px;
						padding-bottom:10px ;
					}
					._td text{
						line-height: 25px;
					}

				}
			}
		
		}
		.comments{
			width: 96%;
			margin: 10px auto;
			display: flex;
			justify-content: space-between;
			color: gray;
		}
		.h1{
			height: 40px;
			line-height: 40px;
			text-align: center;
			margin-top: 50px;
		}
		.image{
			width: 100%;
			._img{
				width: 100%;
			}
		}
		.btn{
			width: 100%;
			display: flex;
			height: 50px;
			background-color: white;
			line-height: 50px;
			padding: 5px;
			position: sticky;
			bottom: 0;
			.icon{
				display: flex;
				font-size: 10px;
				padding-left: 5px;
				width: 45%;
				margin: auto;
				justify-content: space-around;
				position: relative;
				.box{
					position: absolute;
					right: 0px;
					z-index: 100;
				}
			}
			.btu{
				display: flex;
				width: 55%;
				margin: auto;
				padding-right: 10px;
			}
		}
		.btn image{
			width: 20px;
			height: 20px;
		}
		.btn button{
			height: 40px;
			line-height: 40px;
			border-radius: 50px;
			font-size: 12px;
			background-color: #ff7900;
			color: white;
		}
		.btn button:nth-child(1){
			background-color: #ed3f14;
		}
		.transition{
			width: 100%;
			position: fixed;
			bottom: 0;
		}
		.comlist{
			width: 96%;
			margin: 0 auto;
			overflow: hidden;
			.comul{
				display: flex;
				.comimage{
					padding: 10px;
				}
				.hname{
					height: 40px;
					line-height: 40px;
				}
				.remark{
					overflow: hidden;
					white-space: wrap;
				}
				.com_image{
					overflow: hidden;
					margin-top: 10px;
					display: flex;
					flex-wrap: wrap;
				}
				.com_image image{
					width: 60px;
					height: 60px;
				}
			}
		}
		.share{
			display: flex;
			padding: 20px;
			justify-content: space-around;
			._li{
				flex-wrap: nowrap;
				text-align: center;
			}
			._li image{
				width: 50px;
				height: 50px;
			}
		}
	}
</style>
